<template>
  <div class="text-sign">
    <el-input
      v-bind="outConfigInput"
      v-model="signValue.text"
      :validate-event="injectConfig.required"
      @blur="change"
      @input="textChange"
      v-if="injectConfig.showText || injectConfig.showText === undefined"
    >
    </el-input>
    <div class="flex-box sign-date">
      <el-input
        v-bind="outConfigSign"
        @blur="change"
        v-model="signValue.sign"
        v-if="injectConfig.showSign || injectConfig.showSign === undefined"
      >
      </el-input>
      <el-date-picker
        v-bind="outConfigDate"
        @change="change"
        v-model="signValue.date"
        v-if="injectConfig.showDate || injectConfig.showDate === undefined"
      >
      </el-date-picker>
    </div>
    <div class="check-box">
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio label="sign" v-if="injectConfig.showSignButton"
          >签名</el-radio
        >
        <el-radio label="yes" v-if="injectConfig.showAcceptButton"
          >同意</el-radio
        >
        <el-radio label="no" v-if="injectConfig.showRejectButton"
          >不同意</el-radio
        >
        <el-radio label="clear" v-if="injectConfig.showCancelButton"
          >取消</el-radio
        >
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import { textSignInput, textSignInputAdd, textSignDate } from "./options";

export default {
  name: "WorkspaceJsonTextsign",

  props: {
    configInput: {
      type: [Object],
      default: () => {
        return {};
      }
    },
    configSign: {
      type: [Object],
      default: () => {
        return {};
      }
    },
    configDate: {
      type: [Object],
      default: () => {
        return {};
      }
    },
    value: {
      type: [Object],
      default: () => {
        return {};
      }
    }
  },

  inject: ["designerConfig"],

  data() {
    return {
      signValue: {
        text: "",
        sign: "",
        date: ""
      },
      radio: "",
      userInfo:
        window.sessionStorage.getItem("userInfo") &&
        JSON.parse(window.sessionStorage.getItem("userInfo"))
    };
  },

  computed: {
    outConfigInput() {
      return {
        ...textSignInput,
        ...this.configInput,
        readonly: this.injectConfig.readonly,
        disabled: this.injectConfig.disabled,
        placeholder: this.injectConfig.placeholder
      };
    },
    outConfigSign() {
      return {
        ...textSignInputAdd,
        ...this.configSign,
        readonly: this.injectConfig.readonly,
        disabled: this.injectConfig.disabled || !this.injectConfig.editSign
      };
    },
    outConfigDate() {
      return {
        ...textSignDate,
        ...this.configDate,
        readonly: this.injectConfig.readonly,
        disabled: this.injectConfig.disabled || !this.injectConfig.editSignTime
      };
    },
    injectConfig() {
      return this.designerConfig();
    }
  },

  watch: {
    injectConfig(n, o) {
      if (n.timeType != o.timeType) {
        this.initDate();
      }
      if (n.format != o.format) {
        this.initDate();
      }
    },
    value: {
      handler: function(n) {
        this.signValue = n;
      },
      deep: true,
      immediate: true
    }
  },

  mounted() {
    this.initDate();
  },

  methods: {
    initDate() {
      this.$set(textSignDate, "type", this.injectConfig.timeType);
      this.$set(textSignDate, "value-format", this.injectConfig.format);
      this.$set(textSignDate, "format", this.injectConfig.format);
    },
    textChange(val) {
      if (val) {
        this.autoSetDefault();
      } else {
        this.$set(this.signValue, "sign", "");
      }
    },
    change() {
      this.$emit("input", this.signValue);
    },
    radioChange(val) {
      let obj = {
        sign: () => {
          this.autoSetDefault();
        },
        yes: () => {
          this.addText("同意");
          this.autoSetDefault();
        },
        no: () => {
          this.addText("不同意");
          this.autoSetDefault();
        },
        clear: () => {
          Object.keys(this.signValue).forEach(key =>
            this.$set(this.signValue, key, "")
          );
        }
      };
      if (obj[val]) {
        obj[val]();
        this.$emit("input", this.signValue);
      }
    },
    // 判断是否需要追加签名
    autoSetDefault() {
      if (this.injectConfig.addSign) {
        this.setSignDefault();
      }
      if (this.injectConfig.addDate) {
        this.setSignTimeDefault();
      }
    },
    //设置签名默认值
    setSignDefault() {
      if (!this.signValue.sign) {
        this.$set(this.signValue, "sign", this.userInfo.user.name);
      }
    },
    // 设置签名默认时间
    setSignTimeDefault() {
      if (!this.signValue.date) {
        this.$set(
          this.signValue,
          "date",
          new Date().Format(this.injectConfig.format)
        );
      }
    },
    // 追加字段
    addText(str) {
      if (!this.signValue.text) {
        this.$set(this.signValue, "text", "");
      }
      if (this.signValue.text.startsWith(str)) {
        return;
      }
      if (this.signValue.text.startsWith("同意")) {
        let arr = this.signValue.text.split("同意");
        arr.unshift(str);
        this.$set(this.signValue, "text", arr.join(""));
        return;
      }
      if (this.signValue.text.startsWith("不同意")) {
        let arr = this.signValue.text.split("不同意");
        arr.unshift(str);
        this.$set(this.signValue, "text", arr.join(""));
        return;
      }
      if (this.signValue.text) {
        let arr = this.signValue.text.split("");
        arr.unshift(str);
        this.$set(this.signValue, "text", arr.join(""));
        return;
      }
      this.$set(this.signValue, "text", str);
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
}
.sign-date {
  justify-content: flex-end;
  margin-top: 20px;
}

.check-box {
  text-align: center;
  margin-top: 20px;
}
</style>
